<template>
    <footer>
       <ul>
        <router-link custom v-slot="{isActive,navigate}" v-for="item in paths" :to="item.path" :key="item.path">
            <li @click="navigate(item.path)" :class="isActive?'active':''">
                <span><van-icon :name="item.icon"></van-icon></span>
                <span>{{ item.count }}</span>
            </li>
        </router-link>
       </ul>
    </footer>
</template>
<script>
    export default {
        data(){
            return{
                paths:[
                    {path:"/home",count:'首页',icon:'wap-home-o' },
                    {path:"/kind",count:'分类',icon:'apps-o'},
                    {path:"/cart",count:'购物车',icon:"shopping-cart-o"},
                    {path:"/my",count:'我的',icon:"manager-o"},
                ]
            }
        }
    }
</script>

<style scoped>
footer{
    background-color: pink;
}
.active{
        background-color: #fff;
        color: pink;
    } 
footer ul{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
footer ul li{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>